<script setup lang="ts">
defineProps<{
  placement?: string;
  content?: string;
  isTooltip?: boolean;
  isDisabled?: boolean;
  iconConfig: {
    name: string;
    height: string;
    width: string;
  };
  btnConfig?: {
    height: string;
    width: string;
    backgroundColor: string;
    hoverColor: string;
    btnText: string;
  };
  clickFun: () => void;
}>();
</script>

<template>
  <template v-if="isTooltip">
    <el-tooltip effect="dark" :placement="placement">
      <template #content>{{ content }}</template>
      <el-button plain round @click="clickFun">
        <template #icon>
          <SvgIcon
            :name="iconConfig.name"
            :height="iconConfig.height"
            :width="iconConfig.width"
          />
        </template>
      </el-button>
    </el-tooltip>
  </template>
  <template v-else>
    <el-button
      plain
      round
      @click="clickFun"
      :disabled="isDisabled"
      :style="{
        width: btnConfig?.width || 'auto',
        height: btnConfig?.height || 'auto',
        '--btn-bg': btnConfig?.backgroundColor || '#f9fbff',
        '--btn-bg-hover': btnConfig?.hoverColor || '#f1f5f9',
      }"
    >
      <template #icon>
        <SvgIcon
          :name="iconConfig.name"
          :height="iconConfig.height"
          :width="iconConfig.width"
        />
      </template>
      <div class="btn-text" v-if="btnConfig?.btnText">
        {{ btnConfig?.btnText }}
      </div>
    </el-button>
  </template>
</template>

<style scoped lang="scss">
.el-button {
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 8px;
  border: none;
  background-color: var(--btn-bg);
  color: #525252;
  margin-left: 6px;
  &:hover {
    background-color: var(--btn-bg-hover) !important;
  }
  :deep(.el-icon) {
    width: 28px;
    height: 28px;
  }
  :deep(span) {
    margin-left: 0;
  }
  .btn-text {
    font-size: 13px;
    padding-right: 6px;
  }
}
</style>
